<template>
  <div class="article">
    <header1 :title="article.articleTitle" />
    <div class="centont" v-html="article.articleContent"></div>
  </div>
</template>

<script>
import { getArticleList } from '@/network/api/blog/article'
import header1 from './components/Header'

export default {
  name: 'dashboard',
  components: {
    header1,
  },
  data() {
    return {
      article: {
        articleContent: '正在获取内容',
        articleTitle: '正在获取标题',
      },
    }
  },
  created() {
    this.getArticleList()
  },
  methods: {
    getArticleList() {
      getArticleList(
        { articleId: Number(this.$route.query.articleId) },
        { current: 1, pageSize: 20 }
      ).then((response) => {
        this.article = response.data.records[0]
      })
    },
  },
}
</script>

<style scoped>
.article {
  display: flex;
  flex-direction: column;
  background-color: lightgoldenrodyellow;
  width: 800px;
  margin: 0 auto;
  min-height: 100%;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}

.article .centont {
  flex: 1;
}

@media screen and (max-width: 800px) {
  .article {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fbf1e4;
    min-height: 100%;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
  }
}
</style>
